<template>
    <!-- href -->
    <a v-bind:href="src">点击去百度</a>
    <img v-bind:src="imgsrc" width="300" height="300" alt="">
    <!--嵌套执行-->
    <a v-bind:href="src">
        <img v-bind:src="imgsrc" width="300" height="300" alt="">
    </a>
    <!--读取本地的图片  采用简写的方式-->
    <!--语法糖-->
    <img :src="localimg" alt="">
    <hr>
    </hr>
    <h3>{{ username }}</h3>
    <!--v-once 数据加载 只执行一次 改变的时候不i被更新-->
    <h4 v-once>{{username}}</h4>
    <button @click="onUser">点击更改username的值</button>
    <hr>
    </hr>
    <div :id="id" style="font-size: 22px;">文本信息，当我点击改变的时候 去改变样式</div>

    <button @click="onIds">点击更改ID的值</button>
</template>

<script setup>
import { ref } from 'vue'
import vivo from '../assets/vivo.jpg'
//数据库读取数据
const src = "https://www.baidu.com"
const imgsrc = "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/331785/23/6969/56768/68b437a9F4bd1a1d1/082b7442e3a3e223.jpg"
// 变量定义 不能直接读取本地任何数据， 需要通过引入的方式读取本地数据
const localimg = vivo
const username = ref("萧炎")
const onUser = () => { 
    username.value = "美杜莎"
}

const id= ref("d1")
const onIds = () => {
    id.value = "d2"
}
</script>

<style scoped>
#d1{
    color: red;
    font-weight: 800;
}
#d2{
    color: aqua;
    background-color: black;
    font-size: 28px;
}
</style>